Skip to content

fix(a11y): omit aria-controls on inactive tabs to prevent broken tabpanel references - #721

Open
dezzy-music wants to merge 1 commit into
MergeFi:mainfrom
dezzy-music:fix/tabs-inactive-aria-controls-710
Open

dezzy-music wants to merge 1 commit into
MergeFi:mainfrom
dezzy-music:fix/tabs-inactive-aria-controls-710

Conversation

@dezzy-music

Copy link
Copy Markdown

Summary

Fixes #710.

In tabs consumers such as ContributorDashboardClient, only the currently active tabpanel is mounted in the DOM. Previously, every tab rendered an aria-controls attribute pointing to its tabpanel id regardless of whether that panel existed in the DOM, triggering axe ARIA reference violations and misleading assistive technology.

Changes

  • In src/components/ui/Tabs.tsx, omit aria-controls on inactive tabs so only the active tab points to its mounted panel.
  • Added tests in src/components/ui/Tabs.test.tsx ensuring aria-controls is rendered only on the active tab and updates on tab switch.

Verification

  • Ran Jest: 17/17 tests pass in src/components/ui/Tabs.test.tsx.
  • Ran Jest: 5/5 tests pass in src/app/dashboard/contributor/ContributorDashboardClient.test.tsx.
  • Ran ESLint: 0 errors.

@vercel

vercel Bot commented Oct 13, 2026

Copy link
Copy Markdown

@dezzy-music is attempting to deploy a commit to the chonilius' projects Team on Vercel.

A member of the Team first needs to authorize it.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tabs reference an inactive tab's tabpanel id that doesn't exist in the DOM

1 participant